/** @jsx jsx */ import {
  keyframes,
  ClassNames,
  css,
  jsx,
} from '@emotion/react';
import MyHidden from './MyHidden'
import React from 'react';
import settings from './js/util/settings/settings.js';
import searchEngine from './js/util/searchEngine.js';
import PasswordManager from './js/passwordManager/passwordManager.js';
import MyCheckBox from "./Check1";
import { useSelector, useDispatch } from 'react-redux';
import * as store from './reducers/partsSlice';
import EngineSet from './EngineSet'
const css_global = css``;
function PasswordManagersDropdown(props) {
  // var passwordManagersDropdown = document.getElementById('selected-password-manager')
  const [state, setState] = React.useState({ value: 'none' });
  React.useEffect(() => {
    settings.listen('passwordManager', currentPasswordManager => {
      console.log('listen passwordManager=====');
      console.log(currentPasswordManager);
      if (currentPasswordManager) {
        setState({ value: currentPasswordManager.name });
      }
    });
  }, []);
  let options = [];
  let ct = 0;
  for (var manager in PasswordManager.managers) {
    var item = (
      <option key={ct}>{PasswordManager.managers[manager].name}</option>
    );
    options.push(item);
    ct += 1;
  }
  return (
    <select
      onChange={e => {
        let value = e.target.value;
        if (value === 'none') {
          settings.set('passwordManager', { name: 'none' });
        } else {
          settings.set('passwordManager', { name: value });
        }
        setState({ value: value });
      }}
      value={state.value}
      id="selected-password-manager"
      name="selectedPasswordManager"
    >
      {options}
    </select>
  );
}
export default function MySetting(props) {
  const dispatch = useDispatch();
  const [state, setState] = React.useState({
    hidden: true,
    showDlgDetail: false,
    list: {},
  });
  const show_setting = useSelector((state) => state.show_setting);

  const onChange = e => {

  };
  // console.log('MySetting render============');
  // console.log(props);
  // console.log(state);
  return (
    <MyHidden title="" on_hidden={() => {
      dispatch(store.partsSlice.actions.SHOW_SETTING(false))
      // setState(state => ({ ...state, hidden:true }));
    }} hidden={!show_setting}>
      <div >
        <div>
          <h2>Preferences</h2>
        </div>
      </div>

      <div id="privacy-settings-container">
        <h3>Content Blocking</h3>
        <div
          id="content-blocking-statistics"
        >
          <i className="i carbon:manage-protection"></i>
          <span
            data-allowhtml
            id="content-blocking-blocked-requests"
          >
            {state.list.filteringBlockedCount}
          </span>
        </div>

        <div id="tracking-level-container">
          <div >
            <input type="radio" name="blockingLevel" id="blocking-allow-all" />
            <label
              htmlFor="blocking-allow-all"
              data-string="settingsContentBlockingLevel0"
            >settingsContentBlockingLevel0</label>
          </div>
          <div >
            <input
              type="radio"
              name="blockingLevel"
              id="blocking-third-party"
            />
            <label
              htmlFor="blocking-third-party"
              data-string="settingsContentBlockingLevel1"
            >settingsContentBlockingLevel1</label>
          </div>
          <div >
            <input type="radio" name="blockingLevel" id="blocking-block-all" />
            <label
              htmlFor="blocking-block-all"
              data-string="settingsContentBlockingLevel2"
            >settingsContentBlockingLevel2</label>
          </div>

          <div id="content-blocking-information" hidden>
            <div>
              <label
                htmlFor="content-blocking-exceptions"
                data-string="settingsContentBlockingExceptions"
              >settingsContentBlockingExceptions</label>
              <input
                type="text"
                id="content-blocking-exceptions"
                style={{ width: '100%', maxWidth: '500px' }}
              />
            </div>
            <a
              id="customize-filters-link"
              href="https://github.com/minbrowser/min/wiki/Content-blocking-settings"
              data-string="settingsCustomizeFiltersLink"
            >settingsCustomizeFiltersLink</a>
          </div>
        </div>

        <div id="content-type-blocking"></div>
      </div>

      <div id="additional-settings-container">
        <MyCheckBox tag="dark" selected={useSelector((state) => state.dark)} onclick_func={()=>{
           dispatch(store.partsSlice.actions.TOGGLE_DARK());
        }} />
        <h3 data-string="settingsAdditionalFeaturesHeading">settingsAdditionalFeaturesHeading</h3>

        <div >
          <input type="checkbox" id="checkbox-userscripts" />
          <label
            htmlFor="checkbox-userscripts"
            data-string="settingsUserscriptsToggle"
          >settingsUserscriptsToggle</label>
          <div
            data-string="settingsUserscriptsExplanation"
            data-allowhtml
          >settingsUserscriptsExplanation</div>
        </div>

        <div hidden id="section-separate-titlebar">
          <input type="checkbox" id="checkbox-separate-titlebar" />
          <label
            htmlFor="checkbox-separate-titlebar"
            data-string="settingsSeparateTitlebarToggle"
          >settingsSeparateTitlebarToggle</label>
        </div>

        <div id="section-open-tabs-in-foreground">
          <input type="checkbox" id="checkbox-open-tabs-in-foreground" />
          <label
            htmlFor="checkbox-open-tabs-in-htmlForeground"
            data-string="settingsOpenTabsInForegroundToggle"
          >settingsOpenTabsInForegroundToggle</label>
        </div>

        <div id="section-user-agent">
          <input type="checkbox" id="checkbox-user-agent" />
          <label
            htmlFor="checkbox-user-agent"
            data-string="settingsUserAgentToggle"
          >settingsUserAgentToggle</label>
          <input
            type="text"
            id="input-user-agent"
            style={{
              verticalAlign: 'middle',
              marginLeft: '1em',
              width: '375px',
              maxWidth: '80vw',
              visibility: 'hidden',
            }}
          />
        </div>
      </div>
      <EngineSet list={state.list} />
      <div style={{minHeight:"200px"}}></div>
    </MyHidden>
  );
}
